<template lang="html">
  <div class="search-components">
    <!-- 预览区 -->
    <div class="dis al_item searchWrap" :style="{paddingLeft:formData.margins/2+ 'px',paddingRight:formData.margins/2+ 'px',paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
      <div v-show="formData.showShopFlag == '1'" class="searchLeft  dis flex_d al_item dis_ju">
        <span class="el-icon-location-outline" />
        <div>定位</div>
      </div>
      <el-image v-show="formData.showImageFlag == 1" :style="{flex: '1',height: formData.height/2 + 'px'}" fit="fill" src="http://file-sit.ibeeking.com/2021/06/18/title_1624004881295.png" />
      <div v-show="formData.showImageFlag == 0" class="searchWrap_a flex_1 dis al_item" :class="[formData.searchCss == '0'? 'bor_1_s':'']" :style="{height: formData.height/2 + 'px',borderRadius: formData.frameCss/2 + 'px',background: formData.checkBgColor,borderColor:formData.borderColor}">
        <span v-show="formData.showScanFlag == '0'" class="iconfont icon-sousuogongjulan" :style="{color:formData.textColor}" />
        <span v-show="formData.showScanFlag == '1'" class="el-icon-full-screen" :style="{color:formData.textColor}" />
        <input v-model="formData.presetContent" type="text" class="searchInp flex_1" :style="{textAlign: formData.alignDire,color: formData.textColor}" disabled="true">
      </div>
      <div v-show="formData.showMemberCodeFlag == '1'" class="searchRight dis flex_d al_item dis_ju">
        <span class="iconfont icon-erweima" />
        <div>会员码</div>
      </div>
      <div v-show="formData.showMsgFlag == '1'" class="searchRight dis flex_d al_item dis_ju">
        <span class="iconfont icon-gonggao" />
        <div>消息</div>
      </div>
    </div>
    <!-- 右边编辑区 -->
    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">搜索</div>
          <div class="design-editor-form-con">
            <div v-for="(item,index) in tabData" :key="index" class="form-con-sub-detail">
              <!-- form-con-sub-detail-content -->
              <div class="form-con-sub-detail-content" :class="{active:activeIndex == index}" @click="handleClick(index)">
                <span>{{ item.label }}</span>
              </div>
            </div>
            <!-- <div class="form-con-sub-detail">
                <div class="form-con-sub-detail-content" @click="handleClick(e)">
                  <span>样式设置</span>
                </div>
              </div> -->
          </div>
          <div class="form-con-sub-detail-list">
            <div v-show="activeIndex == 0" class="form-con-sub-detail-list-form">
              <div class="title-form-content">
                功能设置
              </div>
              <div class="title-form-placehoder">
                <div class="title-form-placehoder-title-text">
                  <span>预设内容</span>
                </div>
                <div class="title-form-placehoder-title-input">
                  <el-input
                    style="width:300px;"
                    v-model="formData.presetContent"
                    type="text"
                    placeholder="描述"
                    maxlength="9"
                    show-word-limit
                  />
                </div>
              </div>
              <div class="contentFlagWrap">
                <span>显示商场定位</span>
                <el-radio-group v-model="formData.showShopFlag" size="small">
                  <el-radio-button label="1">开启</el-radio-button>
                  <el-radio-button label="0">关闭</el-radio-button>
                </el-radio-group>
              </div>
              <div class="contentFlagWrap">
                <span>搜索栏显示扫一扫</span>
                <el-radio-group v-model="formData.showScanFlag" size="small">
                  <el-radio-button label="1">开启</el-radio-button>
                  <el-radio-button label="0">关闭</el-radio-button>
                </el-radio-group>
              </div>
              <div class="contentFlagWrap">
                <span>显示会员码</span>
                <el-radio-group v-model="formData.showMemberCodeFlag" size="small">
                  <el-radio-button label="1">开启</el-radio-button>
                  <el-radio-button label="0">关闭</el-radio-button>
                </el-radio-group>
              </div>
              <div class="contentFlagWrap">
                <span>显示消息栏</span>
                <el-radio-group v-model="formData.showMsgFlag" size="small">
                  <el-radio-button label="1">开启</el-radio-button>
                  <el-radio-button label="0">关闭</el-radio-button>
                </el-radio-group>
              </div>
              <div class="contentFlagWrap">
                <span>搜索栏是否为图片</span>
                <el-radio-group v-model="formData.showImageFlag" size="small">
                  <el-radio-button label="1">开启</el-radio-button>
                  <el-radio-button label="0">关闭</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div v-show="activeIndex == 1" class="form-con-sub-detail-list-form-css">
              <div class="form-con-sub-detail-list-form-sub">
                <div class="title-form-content">
                  内容样式
                </div>
                <div class="search-css-set-con">
                  <div class="search-css-detail">
                    <div class="flex-column-con">
                      <span>搜索框样式</span>
                    </div>
                    <div class="search-css-radio">
                      <el-radio-group v-model="formData.searchCss" size="small" @change="radioChangeFill">
                        <el-radio-button label="0">描边</el-radio-button>
                        <el-radio-button label="1">填充</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div v-if="formData.searchCss == 0" class="search-css-detail">
                    <div class="flex-column-con">
                      <span>描边颜色</span>
                    </div>
                    <div class="borderColor-search-con">
                      <div class="borderColor-search-con-sub">
                        <a @click="resetBoderColor(1)">重置</a>
                      </div>
                      <el-color-picker
                        v-model="formData.checkBorderColor"
                        show-alpha
                        size="mini"
                        :predefine="formData.predefineColors"
                        @change="changeColorPicker"
                      />
                    </div>
                  </div>
                  <div class="search-css-detail">
                    <div class="flex-column-con">
                      <span>框体样式</span>
                    </div>
                    <el-radio-group v-model="formData.frameCss" size="small">
                      <el-radio-button label="64">圆角</el-radio-button>
                      <el-radio-button label="0">方角</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="search-css-detail">
                    <div class="flex-column-con">
                      <span>文本位置</span>
                    </div>
                    <el-radio-group v-model="formData.alignDire" size="small">
                      <el-radio-button label="left">居左</el-radio-button>
                      <el-radio-button label="center">居中</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="search-css-detail">
                    <div class="flex-column-con">
                      <span>文本颜色</span>
                    </div>
                    <div class="borderColor-search-con">
                      <div class="borderColor-search-con-sub">
                        <a @click="resetBoderColor(3)">重置</a>
                      </div>
                      <el-color-picker
                        v-model="formData.textColor"
                        show-alpha
                        size="mini"
                        :predefine="formData.predefineColors"
                      />
                    </div>
                  </div>
                  <div class="search-css-detail">
                    <div class="flex-column-con">
                      <span>背景色</span>
                    </div>
                    <div class="borderColor-search-con">
                      <div class="borderColor-search-con-sub">
                        <a @click="resetBoderColor(2)">重置</a>
                      </div>
                      <el-color-picker
                        v-model="formData.checkBgColor"
                        show-alpha
                        size="mini"
                        :predefine="formData.predefineColors"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-con-sub-detail-list-form-sub sub-margin">
                <div class="title-form-content">
                  组件样式
                </div>
                <div class="marginWrap">
                  <div class="marginBox">
                    <span>页边距</span>
                    <span class="marginText">{{ formData.margins }}px</span>
                  </div>
                  <el-radio-group v-model="formData.margins" size="small">
                    <el-radio-button label="0">无</el-radio-button>
                    <el-radio-button label="30">有</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="marginWrap">
                  <div class="marginBox">
                    <span>上边距</span>
                    <span class="marginText">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="5">小</el-radio-button>
                    <el-radio-button label="10">中</el-radio-button>
                    <el-radio-button label="15">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="marginWrap">
                  <div class="marginBox">
                    <span>下边距</span>
                    <span class="marginText">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="5">小</el-radio-button>
                    <el-radio-button label="10">中</el-radio-button>
                    <el-radio-button label="15">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="progressWrap">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>框体高度</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.height" />
                      </div>
                      <div class="inpWrap">{{ formData.height }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import index from './index.js'

export default index
</script>

<style lang="scss" scoped>
</style>
